<template>
	<view>
		<view class="body">
			<!-- <view class="top">
				<view class="inputInfo">
					<view class="inputIcon">
						   <u-icon name="search" color="#979797" size="32"></u-icon>
					</view>
					<view class="inputHtml">
						<input type="text" value="" placeholder="请输入菜品名称" />
					</view>
				</view>
			</view> -->
			<view class="but">
				<view class="txtLeft" style="background: #F6F7FA;">
					<!-- <view class="goodsTypeName">
						<view class="goodsTypeNameTxt" style="border-left: #50A8F2 solid 6rpx;">
							时令蔬菜111
						</view>
					</view>
					<view class="goodsTypeName" style="background: #fff;" v-for="(item,index) in 5">
						<view class="goodsTypeNameTxt">
							时令蔬菜
						</view>
					</view> -->
					<view class="goodsTypeName" v-for="(item,index) in goodsType" v-bind:class="{backgroundCl:index==ststusBack}" @click="getGoodsInfos(index,item)" ><!-- style="background: #F6F7FA;" -->
						<view class="goodsTypeNameTxt" v-bind:class="{backgroundCls:index==ststusBack}">
							{{item.realname}}
						</view>
						<view class="countInfo" v-if="item.count_cai>0">
							{{item.count_cai}}
						</view>
					</view>
				</view>
				<view class="txtRight">
					<view class="top">
						<view class="inputInfo">
							<view class="inputIcon">
								   <u-icon name="search" color="#979797" size="32"></u-icon>
							</view>
							<view class="inputHtml">
								<input type="text" value="" placeholder="请输入您所查询的名称" />
							</view>
						</view>
					</view>
					<view class="goodsInfo">
						<!-- 右侧数据页 -->
						<view class="goods2">
							大白菜1
						</view>
						<view class="goods2">
							大白菜2
						</view>
						<view class="goods" v-bind:class="{goods2:item.goodsCheck==1}" v-for="(item,index) in goodsListInfoInit" @click="setData(index,item)">
							{{item.goodsName}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bot">
			ssss事实上
		</view> -->
	</view>
</template>
<style lang="scss" scoped>
.backgroundCls{border-left: #50A8F2 solid 6rpx;border-left: #50A8F2 solid 6rpx;}
.bot{
	//background: green;height: 100rpx;width: 100%;position: relative;//margin-top: 800rpx;
}
.body{
	background: #fff;width: 100%;height: 100%;display: flex;flex-direction: column;position: absolute;
	
	.but{overflow-y: auto;flex: 1;width: 100%;height: 100%;display: flex;
		.txtRight{
			flex: 1;background: #FFF;overflow-y: auto;overflow-x: hidden;
			.goodsInfo{display: flex;flex-wrap: wrap;margin-left: 30rpx;
			//margin-right: 10rpx;
				.goods{font-size: 26rpx;
					width: 30%;background: #EFEFEF;//min-width: 150rpx;
					margin-right: 3%;height: 80rpx;margin-top: 20rpx;text-align: center;line-height: 80rpx;
				}
				.goods2{width: 30%;margin-right: 3%;height: 80rpx;margin-top: 20rpx;text-align: center;line-height: 78rpx;
					color: #E32323;font-size: 26rpx;background: #FFFFFF;border: 3rpx dashed #E32323;border-radius: 4rpx;
				}
			}
			.top{//background: yellow;
				background: #FFF;height: 120rpx;
				overflow: hidden;
				.inputInfo{margin-top: 35rpx;border-radius: 30px;
					margin-left: 20rpx;margin-right: 20rpx;height: 70rpx;background:#F6F7FA;
					display: flex;
					.inputIcon{
						width: 50rpx;height: 100%;//background: red;
						.u-icon{
							margin-top: 20rpx;margin-left: 20rpx;
						}
					}
					.inputHtml{
						flex: 1;
						input{//background: green;
							padding-left: 14rpx;line-height: 70rpx;
							height: 70rpx;width: 100%;color: #B9B9B9;font-size: 24rpx;
						}
						
					}
				}
				
			}
			
			.goodsinfos{background: #FFF;height: 160rpx;display: flex;
				.infoTxts{flex: 1;//background: yellow;
					.Txts3{display: flex;margin-top: 14rpx;
						.lettTxt{font-size: 32rpx;color: #FF641F;
							flex: 1;padding-left: 20rpx;
						}
						.rightTxt{padding-right: 40rpx;
							flex: 1;display: flex;justify-content: flex-end;
							.jian{line-height: 34rpx;border-radius: 50%;color: #B1B1B1;
								height: 38rpx;width: 38rpx;background: #F0F0F0;text-align: center;
							}
							.num{color: #2D2D2D;font-size: 30rpx;
								width: 50rpx;height: 38rpx;text-align: center;
							}
							.jia{
								line-height: 34rpx;border-radius: 50%;color: #FFF;
									height: 38rpx;width: 38rpx;background: #5EAFF4;text-align: center;
							}
						}
					}
					.Txts2{margin-top: 17rpx;
						color: #999999;font-size: 22rpx;padding-left: 20rpx;
					}
					.Txts1{margin-top: 10rpx;
						color: #333333;font-size: 30rpx;padding-left: 20rpx;
					}
				}
				.infoImage{
					image{margin-top: 20rpx;margin-left: 10rpx;
						width: 120rpx;height: 120rpx;border-radius: 8rpx;
					}
				}
			}
		}
		.txtLeft{
			width: 185rpx;overflow-y: auto;overflow-x: hidden;
			.backgroundCl{
				background: #FFF;
				
			}
			.goodsTypeName{
				height: 107rpx;overflow: hidden;
				.countInfo{border-radius: 40%;z-index: 10;text-align: center;
					position: relative;top: -81rpx;margin-left: 150rpx;background: #E82821;color: #FFF;font-size: 22rpx;
				}
				.goodsTypeNameTxt{height: 60rpx;margin-top: 26rpx;//background: red;
					text-align: center;line-height: 60rpx;
					color: #333333;font-size: 28rpx;font-weight: 500;
				}
			}
		}
		
	}
}
</style>
<script>
	export default {
		data() {
			return {
				ststusBack:0,
				goodsType:[],//左侧商品分类数据定义
				goodsListInfo:[],//右侧商品信息数据定义
				goodsListInfoInit:[],//右侧商品信息数据定义---自定义数据
				initTypeId:"",//临时左侧id
				initTypeName:"",//临时左侧的名字
			}
		},
		onLoad() {
			this.initGetGoodsType();//获取左侧数据
			this.getGoodsListInfo();//获取右侧数据
		},
		methods: {
			setData(index,item){
				if(1==this.goodsListInfoInit[index].goodsCheck){
					alert("改菜品已经分配到**"+item.initTypeName+"是否要重新分配吗");// 如果是改数据
				}
				 this.goodsListInfoInit[index].goodsCheck=1;// 状态是1 是已分配
				
				console.log(index+"----"+JSON.stringify(item))
				var _this=this;
				let dataPar={
					"cai_id":item.id,
					"supplier_id":_this.initTypeId
				};
				this.$u.api.supplierSetCai(dataPar).then(res => {
					//console.log("非配返回数据=="+JSON.stringify(res.data));
					//_this.goodsListInfo=res.data;
					_this.$u.toast("分配成功！");
				});	
			},
			
			//获取右侧数据
			getGoodsListInfo(){
				var _this=this;let dataPar={};
				this.$u.api.supplierCaiList(dataPar).then(res => {
					_this.goodsListInfo=res.data;
					_this.createInitData();
				});	
			},
			createInitData(){//创建临时数据
				for (var i = 0; i < this.goodsListInfo.length; i++) {
					var goodsListInfoInit={};
					goodsListInfoInit.id=this.goodsListInfo[i].id;				// 菜的id
					goodsListInfoInit.goodsName=this.goodsListInfo[i].cai_name; // 菜的名字
					goodsListInfoInit.goodsCheck=0;//默认是0 					// 默认是0
					goodsListInfoInit.goodsTypeName=this.initTypeName;          // 分类的名字
					goodsListInfoInit.goodsTypeId=this.initTypeId;              // 分类id
					this.goodsListInfoInit.push(goodsListInfoInit);
				}
				alert("临时数据创建成功"+JSON.stringify(this.goodsListInfoInit));
			},
			getGoodsInfos(index,item){//点击左侧某个分类触发
				this.ststusBack=index;
				this.initTypeName=item.realname;
				 this.initTypeId=item.id;
				// var _this=this;
				// let dataPar={
				// 	id:goodsId
				// }
				// this.$u.api.caiList(dataPar).then(res => {
					 
				// 	_this.goodsListInfo=[];//初始化
				// 	_this.goodsListInfo=res.data;
				// });
			},
			initGetGoodsType(){//获取分类
				var _this=this;
				let dataPar={}
				this.$u.api.supplierlist(dataPar).then(res => {
					//alert("==="+JSON.stringify(res.data));
					console.log("=左侧分类数据=="+JSON.stringify(res.data));
					_this.goodsType=res.data;
					if(res.data.length>0){
						_this.initTypeId=res.data[0].id;
					}
				});
			},
			bindUrls(url){// 商品图片单独处理
				var path=this.serviceUrl+url;
				//var path="https://hr.gukecloud.com/"+url;
				//alert("path==="+path)
				return path;
			}
		}
	}
</script>


